<template>
    <div v-loading="allLoading">
    <!--查询条件start --111s-->
    <el-form :inline="true" :model="query" class="query-form" size="small">
         <el-form-item>
            <el-date-picker v-model="createTime" type="datetimerange" :picker-options="pickerOptions" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" align="left" format="yyyy-MM-dd HH:mm:ss" 
                value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00','23:59:59']" @change="dateChange"></el-date-picker>
        </el-form-item>
        <el-form-item class="query-form-item">
            <el-input v-model="query.content" placeholder="请输入用户名"  prefix-icon="el-icon-search" @keyup.enter.native="onSubmit"  clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="info"  @click="addCar">添加到进货配单</el-button>
        </el-form-item>
    </el-form>
    <!--列表start --222s-->
    <el-table ref="multipleTable" v-loading="loading" :data="list" :header-cell-style="{background:'#F4F4F5',color:'#606266'}" 
        @selection-change="handleSelectionChange" border  @select="select" @select-all="selectAll">
        <el-table-column label="序号" type="selection" align="center" width="50"> </el-table-column>
        <!-- <el-table-column type="selection" width="50"   fixed/> -->
        <el-table-column label="用户 ID" prop="userid"  align="center" width="100"/>
        <el-table-column label="头像" prop="userpic" align="center" width="400">
            <template slot-scope="scope">
                <el-popover v-if="scope.row.userpic" placement="right" trigger="hover">
                    <img :src="scope.row.userpic" style="width:400px;border-radius:3px;">
                    <img slot="reference" :src="scope.row.userpic" style="max-height: 80px;max-width: 50px;border-radius:5px;">
                </el-popover>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="用户昵称" prop="usernick"  align="center"/>
        <el-table-column label="手机号码" prop="usermobile" align="center"  />
        <el-table-column label="企业名称" prop="enterprisename" align="center"  />
        <el-table-column label="社会统一信用代码" prop="registrationnumber" align="center" width="180" />
        <el-table-column label="注册时间" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
                <i class="el-icon-time" v-if="scope.row.userregisttime!=null"></i>
                <span v-if="scope.row.userregisttime!=null">{{ scope.row.userregisttime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                <span v-else>无</span>
            </template>
        </el-table-column>     
    </el-table>
        
        <!--全选删除start-->
    <div class="left-container">
        <el-button type="danger" size="small" @click="delGroup()">删除已选</el-button>
        <transition name="el-fade-in-linear">
            <el-button size="small" @click="toggleSelection()" v-show="cancelToggle">取消选择</el-button>
        </transition>
    </div>
    

    <!--分页模块start-->
    <el-pagination class="pagination-container" background :page-size="query.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
         layout="total,sizes,prev, pager, next, jumper" :current-page="query.currentPage" :page-sizes="[5,10, 20, 30, 50]" :total="totalNumber"></el-pagination>
        
    </div>
</template>
<script>
    import {eventBus}from '../../utils/eventBus'
    import {getList,delUser,} from "../../api/mbuser/mbuser";
    export default {
        data() {
            return {
                pickerOptions: {
                    //快速选择日期
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近六个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 180
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                query: {
                    //查询条件
                    content: "",
                    startTime: "",
                    endTime: "",
                    currentPage: 1,
                    pageSize: 5
                },
                
                formName: null,
                formMap: {
                    add: "添加",
                    edit: "编辑",
                    detail: "详情",
                    setup: "商城品牌设置",
                    invitation: "邀请关系修改",
                    surplusIntegral:"账户余额"
                },
                allLoading:false,
                createTime: [], //选择日期时需要的model
                list: [], //列表集合
                totalNumber: 0, //分页总页数
                loading: true, //列表加载
                cancelToggle: false, //列表是否全选
                multipleSelection: [], //多选集合    
                infoList:{},//选择多选框的信息 
               
            };
        },
        methods: {
            
            /*获取列表事件*/
            getList() {
                this.loading = true;
                getList(this.query)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }

                        this.list = response.data.list || [];
                        if (this.list.length > 0) {
                            let mylist = this.list;
                            for (var i = 0; i < mylist.length; i++) {
                                mylist[i].userban = mylist[i].userban.toString();
                            }
                            this.list = mylist;
                        }

                        this.totalNumber = response.data.totalNumber || 0;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                    });
            },
            addCar(){
                //将商户信息添加到代理商品进货配单页面
                let obj =this.infoList
                if (JSON.stringify(obj) === '{}') {
	                this.$message.warning("请选择一条数据进行查询")
                }  else{
                    localStorage.setItem("infoList",JSON.stringify(this.infoList))
                    this.$router.push({
                        path: "puchasingOrder",
                        query:{
                            usermobile:obj.usermobile,
                            enterprisename:obj.enterprisename,
                            usernick:obj.usernick
                        }
                    })  
                }                                    
            },

            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.$router.push({
                    path: "",
                    query: this.query
                });
                this.getList();
            },

            /*刷新*/
            onRest() {
                this.$router.push({
                    path: ""
                });
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 5
                };
                this.getList();
            },
    
            //显示 查看弹框
            detailForm(index, row) {
                if (row !== null) {
                    this.detailVisible = true;
                    this.formData = Object.assign({}, row);
                    this.formName = "detail";
                }
            },
            // 隐藏详情弹框
            hideDetailForm() {
                // 更改值
                this.detailVisible = !this.detailVisible;
                return true;
            }, // 隐藏详情弹框
            hideSetupForm() {
                // 更改值
                this.setupVisible = !this.setupVisible;
                this.usercompanyinfo ={};
                this.brandcompanyList = [];
                return true;
            },
           
            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },

            /*取消全选事件*/
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            /*列表复选框选择事件*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },

            /*全选删除事件*/
            delGroup() {
                console.log(this.multipleSelection);
                var ids = this.multipleSelection.map(item => item.userid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },
            //限制复选框只能选择一个
            select(selection, row) {
                console.log(row)
                this.infoList = row
                if (selection.length > 1) {
                    let del_row = selection.shift()
                    this.$refs.multipleTable.toggleRowSelection(del_row, false)
                }
            },
            selectAll(selection){
                if (selection.length > 1) {
                    selection.length = 1
                }
            },

            /*日期选择事件*/
            dateChange(val) {
                if (val == null) {
                    this.query.startTime = "";
                    this.query.endTime = "";
                } else {
                    this.query.startTime = val[0];
                    this.query.endTime = val[1];
                    this.query.currentPage = 1;
                }
                this.getList();
                console.log(this.query);
            }
        },
        created() {
            this.getList();
        },
        // beforeDestroy(){
        //     console.log(this.infoList,"这是本业数据")
        //      eventBus.$emit('getInfoList',this.infoList)
        // }

    };
    
</script>
